/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */


/* 颜色变量 */

/* 行为相关颜色 */
//主题色
$-color-primary: #FF2C3C;
//主要边框颜色
$-color-border: #E5E5E5;
//黑色
$-color-black:#101010;
//白色
$-color-white: #ffffff;
//字体主色
$-color-normal: #222222;
//字体浅色
$-color-lighter: #666666;
//字体更浅色
$-color-muted: #888888;

//背景色
$-color-body: #F6F6F6;

//边框
$-solid-border: 1px solid $-color-border;
$-dashed-border: 1px dashed $-color-border;

// default_color是主题色
// minor_color用于渐变色

/* 颜色变量 */
$themes: (
 //  green_theme: (
	// default_color:#7ec045,
	// minor_color: #59a429
 //  ),
  green_theme: (
  	default_color:#E26028,
  	minor_color: #E26028
  ),
 //  brown_theme: (
 //    default_color: #CE853A,
	// minor_color: #CE853A
 //  ),
  brown_theme: (
    default_color: #E26028,
  	minor_color: #E26028
  ),
 //  blue_theme: (
	// default_color:#6E99FF,
	// minor_color: #6E99FF
 //  ),
 //  red_theme: (
	// default_color: #E60012,
	// minor_color: #E60012
 //  ),
  blue_theme: (
  	default_color:#E26028,
  	minor_color: #E26028
  ),
  red_theme: (
  	default_color: #E26028,
  	minor_color: #E26028
  ),
 //  bamboo_theme: (
	// default_color: #06A777,
	// minor_color: #06A777
 //  )
  bamboo_theme: (
  	default_color: #E26028,
  	minor_color: #E26028
  )
);

//遍历主题map
@mixin theme_each {
  @each $theme-name, $theme-map in $themes {
    $theme-color: $theme-map !global;
	[data-theme=#{$theme-name}] & {
		@at-root #{&} {
			@content
		}
	}
  }
}

// 获取导出的主题色
@function get_export_color($name) {
	$theme-name: map-get($themes, $name);
	@return map-get($theme-name, 'default_color');
}

// 获取主题色
@function get_color($key) {
	@return map-get($theme-color, $key);
}

//获取背景颜色
@mixin background_color() {
  @include theme_each {
    background-color: get_color('default_color');
  }
}

//获取渐变背景颜色
@mixin background_linear($deg: 90deg, $min: 0%, $max: 100%) {
  @include theme_each {
    background-image: linear-gradient($deg, get_color('default_color') $min, get_color('minor_color') $max);
  }
}

//获取渐变背景图片和颜色
@mixin background_image($deg: 90deg, $min: 0%, $max: 100%, $url: '') {
  @include theme_each {
    background-image: url($url),linear-gradient($deg, get_color('default_color') $min, get_color('minor_color') $max);
  }
}

//浅色
@mixin background_lighter($lighter:35%){
  @include theme_each {
    background-color: lighten(get_color('default_color'),$lighter);
  }
}

//获取字体颜色
@mixin font_color() {
  @include theme_each {
    color: get_color('default_color');
  }
}

//获取边框颜色
@mixin border_color() {
  @include theme_each {
    border-color: get_color('default_color');
  }
}

//主要边框颜色
$-color-border: #E5E5E5;

//黑色
$-color-black:#101010;

//白色
$-color-white: #ffffff;

//字体主色
$-color-normal: #222222;

//字体浅色
$-color-lighter: #666666;

//字体更浅色
$-color-muted: #888888;

//背景色
$-color-body: #F6F6F6;

/** S Font's size **/
$-font-size-xxs: 22rpx;
$-font-size-xs: 24rpx;
$-font-size-sm: 26rpx;
$-font-size-nr: 28rpx;
$-font-size-md: 30rpx;
$-font-size-lg: 32rpx;
$-font-size-xl: 34rpx;
$-font-size-xxl: 36rpx;
/** E Font's size **/

//边框
$-solid-border: 1px solid $-color-border;
$-dashed-border: 1px dashed $-color-border;

// 引入uview主题
@import "components/uview-ui/theme.scss";

:export {
    red_theme: get_export_color('red_theme');
	brown_theme: get_export_color('brown_theme');
	bamboo_theme: get_export_color('bamboo_theme');
	blue_theme: get_export_color('blue_theme');
	green_theme: get_export_color('green_theme');
}